<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <link href="/styles/base.css" rel="stylesheet" type="text/css">
    <link href="/js/datepicker/datepicker.css" rel="stylesheet">
    <link href="/styles/setting.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/js/jquery-upload/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="/js/jquery-upload/jquery.iframe-transport.js"></script>
    <script type="text/javascript" src="/js/jquery-upload/jquery.fileupload.js"></script>
    <script src="/js/datepicker/datepicker.js"></script>
    <script type="text/javascript" src="/js/system/setting.js"></script>
    <script type="text/javascript" src="/js/system/common.js"></script>
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>
</head>

<#assign currentMineNav="setting"/>
<body style="position: relative;">
<#include "../common/mineNavbar.ftl">
<!--文件上传-->
<form action="/travel/coverImageUpload" method="post" id="coverForm" enctype="multipart/form-data">
    <input type="file" name="pic" id="coverBtn" style="display: none;">
</form>

<div class="main">
    <div class="banner">
        <div class="banner_img banner_note" id="_j_banner">
        </div>
        <div class="tags_bar second_tags_bar">
            <div class="center clearfix">
                <div class="MAvatar clearfix">
                    <div class="MAvaImg flt1">
                        <img width="120" height="120" alt=""
                             src="${(userInfo.headImgUrl)!'http://n1-q.mafengwo.net/s12/M00/35/98/wKgED1uqIreAU9QZAAAXHQMBZ74008.png?imageMogr2%2Fthumbnail%2F%21200x200r%2Fgravity%2FCenter%2Fcrop%2F%21200x200%2Fquality%2F90'}">
                    </div>
                    <div class="MAvaEasyWord flt1">
                        <span class="MAvaName">${(userInfo.nickname)!}</span>
                        <span class="MAvaLevel">Lv.${(userInfo.level)!}</span>
                    </div>
                </div>
            <#include "../common/mineMenu.ftl"/>
            </div>
        </div>
    </div>
</div>
<div class="wrapper clearfix">
    <div class="aside">
        <a href="javascript:;" class="on"><i class="i1"></i>我的信息</a>
        <a href="javascript:;"><i class="i2"></i>我的头像</a>
        <a href="javascript:;"><i class="i3"></i>绑定设置</a>
        <a href="javascript:;"><i class="i4"></i>账号安全</a>
        <!-- <a href="javascript:;"><i class="i8"></i>我的窝设置</a> -->
        <a href="javascript:;"><i class="i9"></i>黑名单管理</a>
        <a href="javascript:;"><i class="i10"></i>我的钱包</a>
    </div>
    <div class="content">
        <div class="hd">
            <strong>我的信息</strong>
            <span>
                    资料完善度
                    <div class="progress">
                        <div class="num">85%</div>
                        <div class="on" style="width:85%"></div>
                    </div>
                </span>
        </div>

        <div class="userinfo">
            <form action="/mine/settingUpdate" method="post" id="_j_form">
                <div class="alert alert-danger"
                     style="color: #a94442;background-color: #f2dede;border-color: #ebccd1;display:none"></div>
                <input type="hidden" name="id" value="${userInfo.id}">
                <dl class="clearfix">
                    <dt>名号：</dt>
                    <dd><input type="text" name="nickname" value="${(userInfo.nickname)!}" maxlength="16"
                               autocomplete="off"
                               data-verification-name="名号" class="verification[required,funcCall[checkNickname]]"></dd>
                </dl>
                <dl class="clearfix">
                    <dt>性别：</dt>
                    <dd>
                        <label><span class="cssradio"><input type="radio" name="gender" id="boy"
                                                             value="1"><span></span></span>男</label>
                        <label><span class="cssradio"><input type="radio" name="gender" id="girl"
                                                             value="0"><span></span></span>女</label>
                        <label><span class="cssradio"><input type="radio" name="gender" id="gay"
                                                             value="2"><span></span></span>保密</label>
                    </dd>
                    <script>
                        var gender =${gender!};
                        console.log(gender);
                        if (gender == 1) {
                            $("#boy").attr("checked", true);
                        }
                        if (gender == 0) {
                            $("#girl").attr("checked", true);
                        }
                        if (gender == 2) {
                            $("#gay").attr("checked", true);
                        }
                    </script>
                </dl>
                <dl class="clearfix">
                    <dt>居住城市：</dt>
                    <dd>
                        <div class="input-group">
                            <input type="hidden" name="citymddid" value="10088" autocomplete="off">
                            <input type="text" name="city" value="${(userInfo.city)!}" data-city="${(userInfo.city)!}"
                                   autocomplete="off"
                                   data-verification-name="居住城市">
                            <ul class="input-suggest"></ul>
                        </div>
                    </dd>
                </dl>
                <dl class="clearfix">
                    <dt>出生日期：</dt>
                    <dd>
                        <input type="text" readonly="true" name="birthday"
                               value="${(userInfo.birthday?string('yyyy-MM-dd'))!}"
                               data-toggle="datepicker" class="" autocomplete="off">
                    </dd>
                </dl>
                <dl class="clearfix">
                    <dt>个人简介：</dt>
                    <dd><textarea name="info" data-verification-name="个人简介" placeholder="例：摄影师/旅居澳洲/潜水爱好者"
                                  class="verification[maxSize[100]]" maxlength="100">${(userInfo.info)!}</textarea></dd>
                </dl>
                <dl class="clearfix">
                    <dt>收货地址：</dt>
                    <dd class="myaddress">
                        <a href="javascript:;">新增收货地址</a>
                    </dd>
                </dl>
                <dl class="clearfix">
                    <dt></dt>
                    <dd class="tips">
                        <p class="title"><b>**</b>提示信息<b>**</b></p>
                        <p>如果您在马蜂窝活动中获得奖品，我们将按照该收货地址发送奖品，
                            所以请填写 真实有效 的收货信息。</p>
                    </dd>
                </dl>
                <div class="btn-sub">
                    <button id="baseSubmit" type="button">保存</button>
                </div>
            </form>
            <script>
                $("#baseSubmit").click(function () {
                    $("#_j_form").ajaxSubmit(function (data) {
                        if (data.success) {
                            window.location.reload();
                        } else {
                            popup(data.msg);
                        }
                    })
                })
            </script>
        </div>
    </div>
    <div class="content hide">
        <div class="hd">
            <strong>我的头像</strong>
            <span>
                    资料完善度
                    <div class="progress">
                        <div class="num">85%</div>
                        <div class="on" style="width:85%"></div>
                    </div>
                </span>
        </div>
        <div class="userlogo">
            <div class="avatar" id="_j_avatar_box">
                <img class="imageBtn" id="coverImage" src="${(userInfo.headImgUrl)!}"
                     width="120" height="120" border="0">
            </div>
            <div class="btn-sub">
                <div class="btn" id="_j_upload" style="position: relative; z-index: 1;">选择图片</div>
                支持jpg、png、jpeg、bmp，图片大小5M以内
                <div class="moxie-shim moxie-shim-html5"
                     style="position: absolute; top: 0px; left: 0px; width: 120px; height: 36px; overflow: hidden; z-index: 0;">
                    <input value="" type="hidden" name="files" id="coverValue"
                           style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"
                           accept="image/jpeg,image/png,image/gif"></div>
                <div class="btn" id="_j_sub" style="position: relative; z-index: 1;">提交</div>
            </div>
            <script>
                //头像的预览
                $("#_j_upload").click(function () {
                    $("#coverBtn").click();
                })


                $("#coverBtn").change(function () {
                    console.log("change");
                    if (this.value) {
                        $("#coverForm").ajaxSubmit(function (data) {
                            console.log(data);
                            $("#coverImage").attr("src", "/" + data);
                            $("#coverValue").val("/" + data);
                        })
                    }
                })
                //头像保存的提交
                $("#_j_sub").click(function () {
                    var headImgUrl = $("#coverValue").val();
                    $.post("/mine/settingHeadUpdate", {headImgUrl: headImgUrl}, function (data) {
                        if (data.success) {
                            window.location.reload();
                        } else {
                            popup(data.msg);
                        }
                    })
                })
            </script>
        </div>
    </div>
    <div class="content hide"></div>
    <div class="content hide">
        <div class="hd">
            <strong>账号安全</strong>
            <span>
                    资料完善度
                    <div class="progress">
                        <div class="num">85%</div>
                        <div class="on" style="width:85%"></div>
                    </div>
                </span>
        </div>
        <div class="userpass">
            <dl class="clearfix">
                <dt>密码：</dt>
                <dd>
                    <a href="javascript:;" id="set-pw-btn">修改密码</a>
                    <div id="set-pw" class="hide">
                        <div class="ways">
                            <a href="javascript:;" class="byphone"><i></i>
                                <p>手机验证修改</p>
                            </a>
                            <a href="javascript:;" class="bymail disable"><i></i>
                                <p>邮箱验证修改</p>
                            </a>
                        </div>
                    </div>
                </dd>
            </dl>
            <dl class="clearfix">
                <dt>绑定邮箱：</dt>
                <dd>
                    etest@gmail.com<span class="status"><a class="vertifyMail" style="margin-left: 15px;"
                                                           href="javascript:;">验证邮箱</a></span>
                </dd>
            </dl>
            <dl class="clearfix">
                <dt>绑定手机：</dt>
                <dd>
                    189****8687<span class="status"><i></i>已绑定 <a class="modifyMobile" style="margin-left: 15px;"
                                                                  href="javascript:;">更改号码</a></span>
                </dd>
            </dl>
            <dl class="clearfix logout">
                <dt>账号注销：</dt>
                <dd><a href="javascript:;">申请注销</a></dd>
            </dl>
            <ul class="logout-question">
                <li class="_j_question"><a>注销账号有哪些影响？ </a></li>
                <li class="_j_question"><a>注销账号的条件有哪些？ </a></li>
                <li class="_j_question"><a>已完成商家入驻，是否可以注销？</a></li>
                <li class="_j_question"><a>攻略号是否可以注销？</a></li>
                <li class="_j_question"><a>手机号未绑定可以注销账号吗？</a></li>
                <li class="_j_question"><a>绑定的手机号已更换，如何注销账号？</a></li>
                <li class="_j_question"><a>申请了注销是否还能撤销？</a></li>
                <li class="_j_question"><a>账号注销后，是否可以重新注册新账号？ </a></li>
                <li class="_j_question"><a>注销账户申请的审核时间是多久？</a></li>
            </ul>
            <br><br>
        </div>
    </div>
    <div class="content hide">
        <div class="hd">
            <strong>黑名单管理</strong>
            <span>
                    资料完善度
                    <div class="progress">
                        <div class="num">85%</div>
                        <div class="on" style="width:85%"></div>
                    </div>
                </span>
        </div>
        <div class="blacklist">
            <div class="bd clearfix">
                <dl class="col-search">
                    <dt class="s-bar focus">
                        <input id="name" class="inp-t" type="text" placeholder="输入用户昵称搜索指定用户">
                        <input id="search" class="inp-b" type="button">
                    </dt>
                    <dd>
                        <ul class="search-list">
                            <li class="_j_question"><a></a></li>
                            <input id="blackId" name="id" type="hidden">
                        </ul>
                        <div class="action"><a id="add_blacklist" class="btn" href="javascript:void(0)">加入/取消黑名单</a>
                        </div>
                    </dd>
                </dl>
                <script>
                    //点击搜索查询指定的用户
                    $("#search").click(function () {
                        var name = $("#name").val();
                        $.post("/mine/searchUser", {name: name}, function (data) {
                            if (data.success) {
                                $("._j_question").html(data.data.nickname);
                                $("#blackId").val(data.data.id);
                            } else {
                                popup(data.msg);
                            }
                        })
                    })
                </script>
                <dl class="col-list">
                    <dt>我的黑名单</dt>
                    <dd>
                        <ul id="blacklist">
                        <#list blackList as b>
                            <li class="_b_question"><a>${b.nickname!}</a></li>
                        </#list>
                        </ul>
                    </dd>
                </dl>
                <div class="tips">＊对方将不可以访问到你的主页</div>
                <script>
                    //点击加入黑名单
                    $("#add_blacklist").click(function () {
                        var blackId = $("#blackId").val();
                        $.post("/mine/blackUser", {blackId: blackId}, function (data) {
                            if (data.success) {
                                window.location.reload();
                            } else {
                                popup(data.msg);
                            }
                        })
                    })
                </script>
            </div>
        </div>
    </div>
    <div class="content hide">
        <div class="hd">
            <a class="btn-payPassword"
               href="/home/setting.php/setpaypwd?callback=%2Fsetting%2Fwallet%2F"><i></i>设置支付密码</a>
            <strong>我的钱包</strong>
            <span>
                    资料完善度
                    <div class="progress">
                        <div class="num">85%</div>
                        <div class="on" style="width:85%"></div>
                    </div>
                </span>
        </div>
        <div class="userwallet">
            <div class="bd">
                <div class="balance clearfix">
                    <div class="total">
                        <div class="honey">蜂蜜余额
                            <span><i class="icon-honey"></i><em>20</em></span>
                        </div>
                    </div>
                </div>
                <div class="income">
                    <div class="income_t clearfix">
                        <ul class="clearfix">
                            <li class="jq-nav-switch on" d_type="honey">
                                蜂蜜明细
                                <span class="bar"></span>
                            </li>
                        </ul>
                        <a href="http://www.mafengwo.cn/i/2947856.html" class="link">蜂蜜常见问题</a>
                    </div>
                    <table>
                        <thead>
                        <tr>
                            <td>收支明细</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>2019-05-22 17:52:20</td>
                            <td>
                                <p title="点评－预定并入住酒店后发表点评获得奖励">点评－预定并入住酒店后发表点评获得奖励</p>
                            </td>
                            <td class="reward">
                                蜂蜜：<span class="num" width="20"><em>+20</em></span></td>
                        </tr>
                        </tbody>
                    </table>
                    <div align="right" id="_j_tn_pagination" class="m-pagination">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content hide">
        <div class="hd">
            <strong>修改绑定手机</strong>
            <span>
                    资料完善度
                    <div class="progress">
                        <div class="num">85%</div>
                        <div class="on" style="width:85%"></div>
                    </div>
                </span>
        </div>

        <div id="setmail" class="setmail set-mobile-v2">
            <!--setMobile step2 -->
            <div class="navtag">
                <a class="step1 on" href="javascript:;"><i></i>身份验证</a><a class="step2"
                                                                          href="javascript:;"><i></i>修改绑定手机</a><a
                    class="step3" href="javascript:;"><i></i>完成修改</a>
            </div>
            <div class="set-mobile mobile-v1">
                <div class="tips">我们将向该手机发送验证码，请在下方输入您看到的验证码</div>
                <dl class="clearfix">
                    <dt>原手机号：</dt>
                    <dd>
                        <div class="sel-way">
                            <input type="text" readonly="readonly" id="mobile_input" placeholder="原手机号"
                                   value="${(userInfo.phone)!}">
                        </div>
                        <a class="btn-code getIdVerifyCode" href="javascript:void(0)">获取验证码</a>
                        <script>
                            //发送验证码
                            $(".getIdVerifyCode").click(function () {
                                var phone = $("#mobile_input").val();
                                $.post("/sendVerifyCode", {phone: phone}, function (data) {
                                    if (data.success) {
                                        popup("验证码发送成功"); //
                                    } else {
                                        popup("验证码发送失败"); //
                                    }
                                })
                            })
                        </script>
                    </dd>
                </dl>
                <dl class="clearfix">
                    <dt>验证码：</dt>
                    <dd><input id="verifyCode" class="code" type="text" value="" placeholder="请输入验证码"></dd>
                </dl>
                <div class="btns">
                    <a id="id_verify" class="btn-sub" href="javascript:void(0)">提交</a>
                </div>
            </div>
            <div class="set-mobile mobile-v2">
                <dl class="clearfix">
                    <dt style="width:116px;">新的手机号码：</dt>
                    <dd>
                        <div class="sel-way">
                            <input id="newMobile" type="text" value="" placeholder="">
                            <i></i>
                            <em></em>
                        </div>
                        <a id="getChangeCode" class="btn-code" href="javascript:void(0)">获取验证码</a>
                        <!-- <a class="btn-code btn-code-dis" href="javascript:void(0);">已发送 60s</a> -->
                        <script>
                            //发送验证码
                            $("#getChangeCode").click(function () {
                                var phone = $("#newMobile").val();
                                $.post("/sendVerifyCode", {phone: phone}, function (data) {
                                    if (data.success) {
                                        popup("验证码发送成功"); //
                                    } else {
                                        popup("验证码发送失败"); //
                                    }
                                })
                            })
                        </script>
                    </dd>
                </dl>
                <dl class="clearfix">
                    <dt style="width:116px;">验证码：</dt>
                    <dd><input id="verifyCode" class="newcode" type="text" value="" placeholder="请输入6位数字验证码"></dd>
                </dl>
                <div class="btns" style="padding-left:126px">
                    <input id="c_code" type="hidden" value="588709">
                    <a id="change_mobile" class="btn-sub" href="javascript:void(0)">提交</a>
                </div>
            </div>
            <script>
                //提交
                $("#change_mobile").click(function () {
                    var code = $(".newcode").val();
                    var phone = $("#newMobile").val();
                    $.post("/mine/settingPhoneUpdate", {code: code, phone: phone}, function (data) {
                        if (data.success) {
                            popup("修改成功"); //
                        } else {
                            popup("修改失败"); //
                        }
                    })
                })
            </script>
            <!--setMobile step2 end-->
        </div>
    </div>
    <div class="content hide">
        <div class="hd">
            <strong>设置邮箱</strong>
            <span>
                    资料完善度
                    <div class="progress">
                        <div class="num">85%</div>
                        <div class="on" style="width:85%"></div>
                    </div>
                </span>
        </div>
        <div class="setmail">
            <!--setMail-->
            <div class="navtag">
                <a class="step1 on" href="javascript:;"><i></i>输入邮箱</a><a class="step2"
                                                                          href="javascript:;"><i></i>前往邮箱验证</a><a
                    class="step3 " href="javascript:;"><i></i>完成绑定</a>
            </div>
            <div class="set-mail" id="changeEmail">
                <dl class="clearfix">
                    <dt>新的邮箱：</dt>
                    <dd><input type="text" id="email" value=""></dd>
                </dl>
                <div class="tips">我们将向该邮箱发送验证邮件，点击该邮件中的链接完成验证。</div>
                <div class="btns">
                    <a class="btn-sub" id="verify" href="javascript:;">发送验证邮件</a>
                    <a class="btn-exit" href="javascript:;">取消</a>
                </div>
            </div>
            <div class="set-mail" id="verifyEmail" style="display: none;">
                <p class="t1">邮件已发送到您的邮箱：<strong>etest@gmail.com</strong><a href="javascript:;"
                                                                            id="changeBtn">修改邮箱地址</a><br>请点击邮箱中的验证链接完成验证
                </p>
                <p class="go-email"><a class="btn-sub" id="resendEmail" href="javascript:;">重新发送验证邮件</a> <a
                        class="btn-sub" target="_blank" href="javascript:;">前往邮箱验证</a></p>
                <p class="t3">没有收到邮件？</p>
                <p class="t4">1.电子邮件偶尔会有延时状况，请耐心等待<br>2.尝试到垃圾邮件里找找看</p>
            </div>
            <!--setMail end-->
        </div>
    </div>
</div>
<div class="mfw-toolbar" id="_j_mfwtoolbar" style="display: block;">
    <div class="toolbar-item-top" style="display: none;">
        <a role="button" class="btn _j_gotop">
            <i class="icon_top"></i>
            <em>返回顶部</em>
        </a>
    </div>
    <div class="toolbar-item-feedback">
        <a role="button" data-japp="feedback" class="btn">
            <i class="icon_feedback"></i>
            <em>意见反馈</em>
        </a>
    </div>
    <div class="toolbar-item-code">
        <a role="button" class="btn">
            <i class="icon_code"></i>
        </a>
        <a role="button" class="mfw-code _j_code">


            <img src="https://p1-q.mafengwo.net/s1/M00/6C/51/wKgIC1t_6TuASybrAADGUPUHjr021.jpeg?imageMogr2%2Fthumbnail%2F%21450x192r%2Fgravity%2FCenter%2Fcrop%2F%21450x192%2Fquality%2F90"
                 width="450" height="192">
        </a>
        <!--<div class="wx-official-pop"><img src="http://images.mafengwo.net/images/qrcode-weixin.gif"><i class="_j_closeqrcode"></i></div>-->
    </div>

</div>
</body>

</html>